<script setup lang="ts" name="IamMember">
import { Search } from '@element-plus/icons-vue'
import type { IamMember } from './type'
import Detail from '@/views/system/iam-member/Detail.vue'

import { checkPermission } from '@/utils/permission'
import { enumStatus } from './type'

const baseApi = '/iam-member'

const { queryParam, loading, dataList, pagination, getList, onSearch, resetFilter } = useList<IamMember>({
  baseApi,
  initQueryParam: {}
})

defineExpose({
  refresh: onSearch,
  addCondition: (key: keyof IamMember, value: any, refresh = false) => {
    queryParam[key] = value
    if (refresh) onSearch()
  }
})

const sortChange = ({ column, prop, order }: { column: { sortBy?: string }; prop: string; order: string }) => {
  let orderBy: 'ASC' | 'DESC' | undefined
  switch (order) {
    case 'ascending':
      orderBy = 'ASC'
      break
    case 'descending':
      orderBy = 'DESC'
      break
    default:
      orderBy = undefined
  }
  pagination.orderBy = orderBy ? `${column.sortBy ?? prop}:${orderBy}` : undefined
  onSearch()
}

const detailRef = ref()
const detailVisible = ref(false)

const openDetail = (id: string) => {
  detailVisible.value = true

  nextTick(() => detailRef.value?.init(id))
}

const closeDetail = () => {
  detailVisible.value = false
}

const handleOperation = (code: string, value?: string | string[]) => {
  switch (code) {
    case 'detail':
      router.push({
        path: '/system/iam-member/details',
        query: {
          id: value
        }
      })
      // openDetail(value as string)
      break

    default:
      throw new Error(`不存在的操作编码${code}!`)
  }
}

const router = useRouter()

const activated = () => {
  nextTick(() => {
    const query = router.currentRoute.value.query
    for (const queryKey in query) {
      queryParam[queryKey as keyof IamMember] = query[queryKey] as any
    }

    onSearch()
  })
}
const timeRange = ref<[string, string] | undefined>()
router.currentRoute.value.meta.keepAlive ? onActivated(activated) : activated()
</script>

<template>
  <div class="list-page">
    <el-space wrap class="list-operation">
      <el-space>
        <span class="search">
          <el-input v-model="queryParam.nickname" placeholder="姓名" clearable @change="onSearch" />
        </span>
        <span class="search">
          <el-input v-model="queryParam.mobilePhone" placeholder="手机号" clearable @change="onSearch" />
        </span>
        <el-date-picker
          v-model="timeRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
          @change="
            val => {
              queryParam.createTimeBegin = val?.[0]
              queryParam.createTimeEnd = val?.[1]
              onSearch()
            }
          "
        />
        <el-button :icon="Search" type="primary" @click="onSearch">查询</el-button>
        <el-button title="重置查询条件" @click="resetFilter">重置</el-button>
      </el-space>
    </el-space>

    <el-table
      ref="tableRef"
      v-loading="loading"
      class="list-body"
      :data="dataList"
      height="100%"
      stripe
      row-key="id"
      style="border-top: 1px solid var(--el-border-color-lighter)"
      @row-dblclick="(row: IamMember) => checkPermission('detail') && handleOperation('detail', row.id)"
      @sort-change="sortChange"
    >
      <el-table-column label="姓名" prop="nickname" show-overflow-tooltip />
      <el-table-column label="手机号" prop="mobilePhone" show-overflow-tooltip />
      <el-table-column label="头像" prop="avatarUrl" show-overflow-tooltip>
        <template #default="{ row }: { row: IamMember }">
          <el-image :src="row.avatarUrl" style="width: 50px; height: 50px" />
        </template>
      </el-table-column>
      <el-table-column label="性别" prop="gender" show-overflow-tooltip />
      <el-table-column label="注册时间" prop="createTime" show-overflow-tooltip :width="200" />
      <el-table-column label="实名" prop="isAuthentication" show-overflow-tooltip>
        <template #default="{ row }: { row: IamMember }">
          <el-tag effect="dark" :type="enumStatus?.[row.isAuthentication]?.color">
            {{ enumStatus?.[row.isAuthentication]?.label }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" :width="180">
        <template #default="{ row }: { row: IamMember }">
          <el-space>
            <el-button
              v-has-permission="'detail'"
              type="primary"
              text
              bg
              size="small"
              @click="handleOperation('detail', row.id)"
            >
              详情
            </el-button>
          </el-space>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-if="pagination.total"
      v-model:current-page="pagination.current"
      v-model:page-size="pagination.pageSize"
      :page-sizes="[10, 15, 20, 30, 50, 100]"
      small
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
      @size-change="getList()"
      @current-change="getList()"
    />

    <el-dialog v-model="detailVisible" width="60%" title="详情" draggable @close="closeDetail">
      <Detail ref="detailRef" />

      <template #footer>
        <el-button @click="closeDetail">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss"></style>
